<template>
  <div class="index-page">
    <div class="background-overlay"></div>
    <el-container class="main-container">
      <el-header>
        <div class="header-content">
          <div class="logo-section">
            <img src="/knowledge-icon.svg" alt="Logo" class="logo-image">
            <span class="logo-text">Arlo知识库</span>
          </div>
          <div class="search-section" @click="showSearch = true">
            <el-icon class="search-icon"><Search /></el-icon>
            <span class="search-placeholder">搜索文章...</span>
          </div>
          <el-menu mode="horizontal" router class="nav-menu">
            <el-sub-menu index="1">
              <template #title>
                <span>文档指南</span>
              </template>
              <el-menu-item-group title="快速开始">
                <el-menu-item index="/docs/guide/intro">入门介绍</el-menu-item>
                <el-menu-item index="/docs/guide/setup">环境搭建</el-menu-item>
                <el-menu-item index="/docs/guide/first-app">第一个应用</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="基础教程">
                <el-menu-item index="/docs/guide/concepts">基本概念</el-menu-item>
                <el-menu-item index="/docs/guide/structure">项目结构</el-menu-item>
                <el-menu-item index="/docs/guide/components">组件开发</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="进阶指南">
                <el-menu-item index="/docs/guide/optimization">性能优化</el-menu-item>
                <el-menu-item index="/docs/guide/best-practices">最佳实践</el-menu-item>
                <el-menu-item index="/docs/guide/deployment">部署指南</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <span>Java</span>
              </template>
              <el-menu-item-group title="基础知识">
                <el-menu-item index="/docs/java/basic">Java基础</el-menu-item>
                <el-menu-item index="/docs/java/oop">面向对象</el-menu-item>
                <el-menu-item index="/docs/java/collection">集合框架</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="高级特性">
                <el-menu-item index="/docs/java/thread">多线程编程</el-menu-item>
                <el-menu-item index="/docs/java/io">IO与网络</el-menu-item>
                <el-menu-item index="/docs/java/jvm">JVM原理</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="框架技术">
                <el-menu-item index="/docs/java/spring">Spring全家桶</el-menu-item>
                <el-menu-item index="/docs/java/mybatis">MyBatis</el-menu-item>
                <el-menu-item index="/docs/java/netty">Netty</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <span>数据库</span>
              </template>
              <el-menu-item-group title="关系型数据库">
                <el-menu-item index="/docs/database/mysql-basic">MySQL基础</el-menu-item>
                <el-menu-item index="/docs/database/mysql-advanced">高级特性</el-menu-item>
                <el-menu-item index="/docs/database/mysql-optimization">性能优化</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="NoSQL数据库">
                <el-menu-item index="/docs/database/redis-basic">Redis基础</el-menu-item>
                <el-menu-item index="/docs/database/redis-advanced">高级特性</el-menu-item>
                <el-menu-item index="/docs/database/mongodb-basic">MongoDB基础</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="数据库设计">
                <el-menu-item index="/docs/database/design-theory">设计理论</el-menu-item>
                <el-menu-item index="/docs/database/design-practice">最佳实践</el-menu-item>
                <el-menu-item index="/docs/database/sharding">分库分表</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <span>中间件</span>
              </template>
              <el-menu-item-group title="消息队列">
                <el-menu-item index="/docs/middleware/kafka">Kafka</el-menu-item>
                <el-menu-item index="/docs/middleware/rabbitmq">RabbitMQ</el-menu-item>
                <el-menu-item index="/docs/middleware/rocketmq">RocketMQ</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="缓存技术">
                <el-menu-item index="/docs/middleware/redis-cache">Redis缓存</el-menu-item>
                <el-menu-item index="/docs/middleware/memcached">Memcached</el-menu-item>
                <el-menu-item index="/docs/middleware/cache-strategy">缓存策略</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="API网关">
                <el-menu-item index="/docs/middleware/nginx">Nginx</el-menu-item>
                <el-menu-item index="/docs/middleware/spring-cloud-gateway">Spring Cloud Gateway</el-menu-item>
                <el-menu-item index="/docs/middleware/zuul">Zuul</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <span>分布式</span>
              </template>
              <el-menu-item-group title="分布式基础">
                <el-menu-item index="/docs/distributed/theory">分布式理论</el-menu-item>
                <el-menu-item index="/docs/distributed/cap">CAP理论</el-menu-item>
                <el-menu-item index="/docs/distributed/transaction">分布式事务</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="微服务架构">
                <el-menu-item index="/docs/distributed/spring-cloud">Spring Cloud</el-menu-item>
                <el-menu-item index="/docs/distributed/dubbo">Dubbo</el-menu-item>
                <el-menu-item index="/docs/distributed/service-mesh">Service Mesh</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="云原生技术">
                <el-menu-item index="/docs/distributed/docker">Docker</el-menu-item>
                <el-menu-item index="/docs/distributed/k8s">Kubernetes</el-menu-item>
                <el-menu-item index="/docs/distributed/devops">DevOps</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <span>Linux</span>
              </template>
              <el-menu-item-group title="基础知识">
                <el-menu-item index="/docs/linux/command">常用命令</el-menu-item>
                <el-menu-item index="/docs/linux/file-system">文件系统</el-menu-item>
                <el-menu-item index="/docs/linux/process">进程管理</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Shell编程">
                <el-menu-item index="/docs/linux/shell-basic">Shell基础</el-menu-item>
                <el-menu-item index="/docs/linux/shell-script">脚本编写</el-menu-item>
                <el-menu-item index="/docs/linux/shell-automation">自动化运维</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="系统优化">
                <el-menu-item index="/docs/linux/performance-cpu">CPU优化</el-menu-item>
                <el-menu-item index="/docs/linux/performance-memory">内存优化</el-menu-item>
                <el-menu-item index="/docs/linux/performance-io">IO优化</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <span>面试</span>
              </template>
              <el-menu-item-group title="Java面试">
                <el-menu-item index="/docs/interview/java-core">Java核心</el-menu-item>
                <el-menu-item index="/docs/interview/java-framework">框架技术</el-menu-item>
                <el-menu-item index="/docs/interview/java-jvm">JVM相关</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="数据库面试">
                <el-menu-item index="/docs/interview/mysql">MySQL</el-menu-item>
                <el-menu-item index="/docs/interview/redis">Redis</el-menu-item>
                <el-menu-item index="/docs/interview/mongodb">MongoDB</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="系统设计">
                <el-menu-item index="/docs/interview/architecture">架构设计</el-menu-item>
                <el-menu-item index="/docs/interview/design-pattern">设计模式</el-menu-item>
                <el-menu-item index="/docs/interview/case-study">案例分析</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="/docs/daily/tech">生活日常</el-menu-item>
          </el-menu>
        </div>
      </el-header>
          
          <!-- 搜索弹出框 -->
          <el-dialog
            v-model="showSearch"
            :show-close="false"
            :modal="true"
            custom-class="search-dialog"
            width="600px"
            center
          >
            <div class="search-container">
              <div class="search-header">
                <el-input
                  v-model="searchQuery"
                  placeholder="搜索文章..."
                  class="search-input"
                  :prefix-icon="Search"
                  @keyup.enter="handleSearch"
                  ref="searchInput"
                />
                <el-button circle @click="showSearch = false">
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
              
              <div v-if="searchHistory.length > 0" class="search-history">
                <div class="history-header">
                  <h3>搜索历史</h3>
                  <el-button text @click="clearHistory">清空历史</el-button>
                </div>
                <div class="history-list">
                  <el-tag
                    v-for="(item, index) in searchHistory"
                    :key="index"
                    class="history-item"
                    @click="searchWithHistory(item)"
                  >
                    <el-icon><Clock /></el-icon>
                    {{ item }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-dialog>
          <el-main>
            <div class="content-container">
              <div class="sidebar">
                <div class="glass-card author-card">
                  <div class="author-info">
                    <img src="https://czc-anyuanqc.obs.cn-east-3.myhuaweicloud.com/convenience/applet/1716866284023.jpg" alt="作者头像" class="author-avatar">
                    <h2>程序员Arlo</h2>
                    <p class="author-bio">休将白发唱黄鸡</p>
                    <div class="author-stats">
                    </div>
                  </div>
                </div>
                <div class="glass-card tags-section">
                  <h3>标签云</h3>
                  <div class="tag-cloud">
                    <el-tag
                      v-for="tag in tags"
                      :key="tag.name"
                      :type="tag.type"
                      class="tag-item"
                      effect="dark"
                    >
                      {{ tag.name }} ({{ tag.count }})
                    </el-tag>
                  </div>
                </div>
                <div class="glass-card categories-section">
                  <h3>文章分类</h3>
                  <div class="category-list">
                    <div v-for="category in categories" :key="category.name" class="category-item">
                      <div class="category-name">{{ category.name }} ({{ category.count }})</div>
                      <el-progress
                        :percentage="category.percentage"
                        :color="category.color"
                        :show-text="false"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="main-content">
                <div class="latest-articles">
                  <div class="glass-card">
                    <h2 class="section-title">最新文章</h2>
                    <el-scrollbar height="400px">
                      <div v-for="article in latestArticles" :key="article.id" class="article-item">
                        <router-link :to="`/article/${article.id}`" class="article-link">
                          <h3>{{ article.title }}</h3>
                          <p class="article-meta">
                            <el-icon><Calendar /></el-icon>
                            <span>{{ article.date }}</span>
                          </p>
                        </router-link>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
                <div class="featured-articles">
                  <div class="glass-card">
                    <h2 class="section-title">精选文章</h2>
                    <div class="featured-grid">
                      <div v-for="article in featuredArticles" :key="article.id" class="featured-item">
                        <router-link :to="`/article/${article.id}`" class="featured-link">
                          <div class="featured-content">
                            <h3>{{ article.title }}</h3>
                            <p class="article-excerpt">{{ article.excerpt }}</p>
                            <div class="article-meta">
                              <el-tag size="small" effect="dark">{{ article.category }}</el-tag>
                              <span class="read-more">阅读更多</span>
                            </div>
                          </div>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Document, Calendar, View, Link, Message, Search, Close, Timer } from '@element-plus/icons-vue'

interface Article {
  id: number
  title: string
  date: string
  category: string
  excerpt?: string
}

const latestArticles = ref<Article[]>([
  {
    id: 1,
    title: '最新文章标题1',
    date: '2024-01-15',
    category: '技术'
  },
  {
    id: 2,
    title: '最新文章标题2',
    date: '2024-01-14',
    category: '生活'
  },
  // 添加更多最新文章...
])

const featuredArticles = ref<Article[]>([
  {
    id: 1,
    title: '精选文章1',
    date: '2024-01-10',
    category: '技术',
    excerpt: '这是一篇精选文章的摘要，介绍了一些有趣的技术内容...'
  },
  {
    id: 2,
    title: '精选文章2',
    date: '2024-01-09',
    category: '教程',
    excerpt: '这是另一篇精选文章的摘要，包含了实用的教程内容...'
  },
  // 添加更多精选文章...
])

const totalArticles = ref(42)
const totalViews = ref('10k+')
const tags = ref([
  { name: 'JavaScript', count: 15, type: '' },
  { name: 'Vue', count: 12, type: 'success' },
  { name: 'React', count: 8, type: 'info' },
  { name: 'TypeScript', count: 10, type: 'warning' },
  { name: '前端开发', count: 20, type: 'danger' },
  { name: '后端开发', count: 18, type: '' },
  { name: '人工智能', count: 5, type: 'success' },
  { name: '云计算', count: 7, type: 'info' }
])

const categories = ref([
  { name: '技术教程', count: 25, percentage: 35, color: '#409EFF' },
  { name: '学习笔记', count: 18, percentage: 25, color: '#67C23A' },
  { name: '项目实战', count: 15, percentage: 20, color: '#E6A23C' },
  { name: '心得体会', count: 12, percentage: 15, color: '#F56C6C' },
  { name: '其他', count: 5, percentage: 5, color: '#909399' }
])

// 搜索相关状态
const showSearch = ref(false)
const searchQuery = ref('')
const searchHistory = ref<string[]>([])

// 从localStorage加载搜索历史
onMounted(() => {
  const history = localStorage.getItem('searchHistory')
  if (history) {
    searchHistory.value = JSON.parse(history)
  }
})

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    // 添加到搜索历史
    if (!searchHistory.value.includes(searchQuery.value)) {
      searchHistory.value.unshift(searchQuery.value)
      if (searchHistory.value.length > 10) {
        searchHistory.value.pop()
      }
      // 保存到localStorage
      localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
    }
    // TODO: 实现搜索逻辑
    console.log('Searching for:', searchQuery.value)
    showSearch.value = false
    searchQuery.value = ''
  }
}

// 使用历史记录搜索
const searchWithHistory = (query: string) => {
  searchQuery.value = query
  handleSearch()
}

// 清空搜索历史
const clearHistory = () => {
  searchHistory.value = []
  localStorage.removeItem('searchHistory')
}
</script>

<style scoped>
.search-section {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 6px 30px;
  margin: 0 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-section:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.search-icon {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 8px;
  transition: color 0.3s ease;
}

.search-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.3s ease;
}
.header-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  gap: 24px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-image {
  width: 32px;
  height: 32px;
  transform: skew(-10deg);
}

.logo-text {
  font-size: 1.8rem;
  font-weight: bold;
  font-family: "华文行楷", "楷体", KaiTi, serif;
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.search-section {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 6px 25px;
  margin: 0 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-section:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.search-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 10px;
  transition: color 0.3s ease;
}

.search-placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.search-section:hover .search-icon,
.search-section:hover .search-placeholder {
  color: rgba(255, 255, 255, 1);
}

.search-icon {
  font-size: 20px;
  margin-right: 10px;
  color: #fff;
}

.search-placeholder {
  color: #fff;
  font-size: 16px;
  opacity: 0.8;
}

/* 搜索弹窗样式 */
.search-dialog {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.search-container {
  padding: 20px;
}

.search-header {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-input {
  flex: 1;
}

.search-history {
  margin-top: 24px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.history-header h3 {
  margin: 0;
  color: #606266;
  font-size: 16px;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 6px 12px;
  transition: all 0.3s ease;
}

.history-item:hover {
  transform: translateY(-2px);
}

/* 保持原有样式 */
.index-page {
  min-height: 100vh;
  position: relative;
  background: url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.main-container {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.el-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu {
  background: transparent;
  border-bottom: none;
  margin-left: auto;
}
.nav-menu .el-menu-item, .doc-link {
  color: #2c3e50;
}

.nav-menu .el-menu-item.is-active {
  color: #409EFF;
  background: rgba(255, 255, 255, 0.1);
}

.content-container {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 1rem;
  padding: 0 1rem 1rem 0;
  max-width: 1600px;
  margin: 0;
}

.author-card {
  text-align: center;
  color: white;
  min-height: 250px;
  height: 250px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.author-bio {
  color: rgba(255, 255, 255, 0.8);
  margin: 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.main-content {
  display: grid;
  gap: 1.5rem;
}

.sidebar {
  display: grid;
  gap: 1.5rem;
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.section-title {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.5rem;
}

.article-item {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.article-item:last-child {
  border-bottom: none;
}

.article-link {
  text-decoration: none;
  color: white;
}

.article-link h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.featured-grid {
  display: grid;
  gap: 1.5rem;
}

.featured-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.featured-item:hover {
  transform: translateY(-5px);
}

.featured-link {
  text-decoration: none;
  color: white;
}

.featured-content {
  padding: 1.5rem;
}

.article-excerpt {
  color: rgba(255, 255, 255, 0.7);
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.read-more {
  color: #409EFF;
  font-size: 0.9rem;
}

.author-card {
  text-align: center;
  color: white;
  min-height: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.author-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.author-info h2 {
  margin: 0;
  margin-bottom: 0.2rem;
  font-size: 1.8rem;
  font-family: "华文行楷", "楷体", KaiTi, serif;
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.author-bio {
  background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  font-size: 2.0rem;
  font-family: "楷体", KaiTi, "华文楷体", STKaiti, serif;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
  font-weight: 400;
  text-shadow: 1px 1px 4px rgba(246, 211, 101, 0.3);
}

.tags-section, .categories-section {
  text-align: left;
}

.tags-section h3, .categories-section h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-item {
  margin: 0.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag-item:hover {
  transform: scale(1.05);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.category-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-name {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.el-progress {
  margin-top: 0.25rem;
}

.author-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  border: 3px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}

.author-info h2 {
  margin: 0;
  margin-bottom: 1rem;
}

.author-bio {
  color: rgba(255, 255, 255, 0.8);
  margin: 1rem 0;
  font-size: 0.9rem;
}

.author-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.social-links a {
  color: white;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #409EFF;
}

@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .content-container {
    padding: 1rem;
  }
  
  .section-title {
    font-size: 1.2rem;
  }
}
</style>